<script>
    $(function(){
        update_abonnements();
        $( "#form_abonnements" ).dialog({
            autoOpen: false,
            resizable: false,
            height:500,
            width:550,
            modal: true
         });
    });
    
    function change_statut(id){
        var data = "action=change_statut&id="+id;
        ajax_abonnement(data);
    }
    
    function ajax_abonnement(data){
        $.ajax({
            type: 'GET',
            url: 'app/ajax/ajax_abonnements.php',
            data: data,
            success: function(result){
                $("#id").val('');
                $("#button").html("");
                $("#nom").val('');
                $("#description").val('');
                $("#prix").val('');
                $("#duree").val('');
                $("#gratuit").val('');
                $("#form_abonnements").dialog('close');
                update_abonnements();
                //alert(result.toString());
            }
        });
    }
    
    function update_abonnements(){
        $.getJSON('app/ajax/ajax_abonnements.php?action=liste', function(data) {
            $("#liste_abonnements").html("<thead>"
                +"<tr>"
                +"<td>ID</td>"
                +"<td>Nom</td>"
                +"<td>Description</td>"
                +"<td>Prix</td>"
                +"<td>Durée</td>"
                +"<td>Gratuit</td>"
                +"<td>Statut</td>"
                +"<td>Actions</td>"
                +"</tr>"
                +"</thead>"
            );
            $.each(data, function(i, item) {
                if(item.Statut=='1'){
                    var statut = "Désactiver";
                }
                else{
                    var statut = "Activer";
                }
                $("#liste_abonnements").append(
                    "<tr>"
                    +"<td>"+item.IdAbonnement+"</td>"
                    +"<td>"+item.Nom+"</td>"
                    +"<td>"+item.Description+"</td>"
                    +"<td>"+item.Prix+"</td>"
                    +"<td>"+item.Duree+"</td>"
                    +"<td>"+item.Gratuit+"</td>"
                    +"<td>"+item.Statut+"</td>"
                    +"<td><a class=\"btn\" onclick=\"modifier("+item.IdAbonnement+", '"+escape(item.Nom)+"', '"+escape(item.Description)+"', "+item.Prix+", "+item.Duree+", "+item.Gratuit+", "+item.Statut+")\">Modifier</a><a class=\"btn\" onclick=\"change_statut("+item.IdAbonnement+")\">"+statut+"</a></td>"
                    +"</tr>"
                );
            });
            $('#liste_abonnements').dataTable({
                "bDestroy": true,
                "oLanguage": {
                    "sLengthMenu": "Voir _MENU_ résultats par page",
                    "sZeroRecords": "Aucun résultat trouvé - Désolé",
                    "sInfo": "_START_ - _END_ sur _TOTAL_",
                    "sInfoEmpty": "Showing 0 to 0 of 0 records",
                    "sInfoFiltered": "(filtered from _MAX_ total records)",
                    "oPaginate": {
                        "sFirst": "Premier",
                        "sLast": "Dernier",
                        "sNext": "Suivant",
                        "sPrevious": "Précedent"
                    },
                    "sSearch": "Rechercher"
                }
            });
        });
        //setTimeout(update_abonnements, 60000);
    }
    
    function addslashes (str) {
        return (str + '').replace(/[\\"']/g, '\\$&').replace(/\u0000/g, '\\0');
    }

    
    function modifier(id, nom, description, prix, duree, gratuit, statut){
        $("#id").val(id);
        $("#formulaire_name").html("Modifier un abonnement");
        $("#button").html("<a class=\"btn\" onclick=\"validate_modifier()\">Modifier</a>");
        $("#nom").val(unescape(nom));
        $("#description").val(unescape(description));
        $("#prix").val(prix);
        $("#duree").val(duree);
        $("#gratuit").val(gratuit);
        $("#enable").html("");
        $("#enable").append("<option value=\"1\" >Activer</option>");
        if(statut==0){
            $("#enable").append("<option value=\"0\" selected=\"selected\">Désactivé</option>");
        }
        else{
            $("#enable").append("<option value=\"0\" >Désactivé</option>");
        }
        $("#form_abonnements").dialog('open');
    }
    
    function validate_modifier(){
        if($("#nom").val()==''||$("#description").val()==''||$("#prix").val()==''||$("#duree").val()==''||$("#gratuit").val()==''){
            alert("Merci de renseigner tous les champs obligatoires !");
            return;
        }
        var data = "action=modifier&id="+$("#id").val()+"&nom="+addslashes($("#nom").val())+"&description="+addslashes($("#description").val())+"&prix="+$("#prix").val()+"&duree="+$("#duree").val()+"&gratuit="+$("#gratuit").val()+"&enable="+$("#enable").val();
        ajax_abonnement(data);
    }
    
    function view_ajouter(){
        $("#id").val('');
        $("#formulaire_name").html("Ajouter un abonnement");
        $("#button").html("<a class=\"btn\" onclick=\"validate_ajouter()\">Ajouter</a>");
        $("#nom").val();
        $("#description").val();
        $("#prix").val('');
        $("#duree").val('');
        $("#gratuit").val('');
        $("#enable").html("");
        $("#enable").append("<option value=\"1\" >Activé</option>");
        $("#enable").append("<option value=\"0\">Désactivé</option>");
        $("#form_abonnements").dialog('open');
    }
    
    function validate_ajouter(){
        if($("#nom").val()==''||$("#description").val()==''||$("#prix").val()==''||$("#duree").val()==''||$("#gratuit").val()==''){
            alert("Merci de renseigner tous les champs obligatoires !");
            return;
        }
        var data = "action=ajouter&nom="+addslashes($("#nom").val())+"&description="+addslashes($("#description").val())+"&prix="+$("#prix").val()+"&duree="+$("#duree").val()+"&gratuit="+$("#gratuit").val()+"&enable="+$("#enable").val();
        ajax_abonnement(data);
    }
</script>
<div id="form_abonnements">
    <h3 id="formulaire_name"></h3>
    <input type="hidden" id="id">
    <label>Nom</label><input type="text" id="nom" maxlength="50">
    <label>Description</label><textarea style="width: 480px" rows="5" cols="100" id="description"></textarea>
    <label>Prix</label><input type="text" id="prix" maxlength="150">
    <label>Durée</label><input type="text" id="duree" maxlength="20">
    <label>Gratuit</label><input type="text" id="gratuit" maxlength="2">
    <label>Statut</label><select id="enable"></select>
    <br />
    <span id="button"></span>
</div>
<h1>Gestion des abonnements</h1>
<a class="btn" onclick="view_ajouter()">Ajouter un abonnement</a>
<br />
<br />
<table id="liste_abonnements" style="width: 100%"></table>